<!-- 报表参数 -->
<template>
    <div  class="dashboard-editor-container">
      <el-row style="background: #fff; padding: 16px 16px 0;">
      <div style="width:100%">
        <div class="btn topSubmitBtn" style="display:flex;justify-content:flex-end">
          <el-button type="primary" @click="submit()">保存设置</el-button>
          <el-button type="primary" @click="setEmail()">发送测试邮件</el-button>
        </div>
        <div class="input-item"> 
          <!-- <div class="parameType">
            <div >
              <div class="title">报表生成</div>
            </div>
            <div class="content top1">
              <div class="certification">
                <el-form label-width="150px">
                  <el-col :xs="24" :sm="24" :lg="24">
                    <el-form-item label="最大保存报表个数：">
                      <el-input v-model="deviceForm.CenterIP" style="width:280px"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="24">
                    <el-form-item label="自动报表生成时间：">
                      <el-input v-model="deviceForm.CorpUUID" style="width:280px"></el-input>
                    </el-form-item>
                    <p>（每个报表周期结束后的第一天）</p>
                  </el-col>
                </el-form>
              </div>
            </div>
          </div> -->
          
          <div class="parameType">
            <div>
              <div class="title">报表/邮箱设置</div>
            </div>
            <div class="content">
              <div class="information">
                <el-form label-width="150px">
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="自动报表生成时间：">
                            <el-input v-model.number="deviceForm.CreateTime" style="width:300px"><span slot="append">点</span></el-input>
                            <!-- <el-time-picker  style="width:300px !important" value-format="HH:mm:ss" format="HH:mm:ss" v-model="deviceForm.CreateTime" placeholder="请选择自动报表生成时间"></el-time-picker> -->
                            <span style="color:darkgrey"> 每个报表周期结束后的第一天</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="发送邮箱：">
                        <el-input style="width:300px !important"  v-model="deviceForm.FromAccount"></el-input>
                        <span style="color:darkgrey"> 请尽量填写公司销售或行政邮箱，邮箱通知会使用这个邮箱发送邮件</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="邮箱密码：">
                        <el-input style="width:300px !important" show-password v-model="deviceForm.Pwd" placeholder="请输入邮箱密码"></el-input>
                        <span  style="color:darkgrey"> 通讯加密：</span><el-switch  v-model="deviceForm.IsOpenSSL" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="邮箱服务器：">
                        <el-input style="width:300px !important"  v-model="deviceForm.SmtpServer"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="服务器端口：">
                        <el-input style="width:300px !important"  v-model.number="deviceForm.SmtpServerPort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="接收邮箱：">
                            <el-input style="width:300px !important"  v-model="deviceForm.ToAccount"></el-input>
                            <span  style="color:darkgrey"> 不得和发送邮箱账号重复</span>
                        </el-form-item>
                    </el-col>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
      </el-row>
    </div>
</template>
  
  <script>
  import { connrequest } from '@/api/firstPage'
  import { parseTime, formatTime } from '@/utils/index.js';
  export default {
  data() {
    return {
      deviceForm:{
        CreateTime:'',
        FromAccount:'',
        Pwd:'',
        IsOpenSSL:1,
        SmtpServerPort:0,
        SmtpServer:"",
        ToAccount:''
      },
      Days: 0,
      dayColor:''
    }
  },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.getData()
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    methods: {
      async getData() {
        const res = await connrequest('GetReportConfig')
        
        this.deviceForm = res.Data
      },
      dateTrans(date) {
        let computeTime = date / 1000
        let year = Math.floor(computeTime / 86400 / 365);
        computeTime = computeTime % (86400 * 365);
        let month = Math.floor(computeTime / 86400 / 30);
        computeTime = computeTime % (86400 * 30);
        let day = Math.floor(computeTime / 86400);
        computeTime = computeTime  % 86400;
        if(year < 1 && month < 1 && day <= 30){
          this.dayColor = 'red'
        }
        return `${year > 0 ? year + '年' : ''}${month > 0 ? month + '月' : ''}${day}天`;
      },
      async submit(){
        // this.$message.info('该功能还在测试阶段')
        // return
        // let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        // let domainName = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
        // let character32 = /^[A-Za-z0-9]{1,32}$/
        // let character64 = /^.{1,64}$/
        // let number = /^[0-9]*$/
        // if (this.deviceForm.CenterIP === '') {
        //   this.$message.error("认证中心不能为空");
        //   return false;
        // }
        // if (!reg.test(this.deviceForm.CenterIP) && !domainName.test(this.deviceForm.CenterIP)) {
        //   //  www.hunterxyz.com
        //   this.$message.error("认证中心格式错误");
        //   return false;
        // }
        // if (this.deviceForm.CorpUUID === '') {
        //   this.$message.error("企业编码不能为空");
        //   return false;
        // }
        // if (!character32.test(this.deviceForm.CorpUUID)) {
        //   this.$message.error("企业编码格式错误");
        //   return false;
        // }
        // if (!character64.test(this.deviceForm.ShadowServerIP) &&this.deviceForm.ShadowServerIP !== '' ) {
        //   this.$message.error("服务器地址不能超过64位字符");
        //   return false;
        // }
        // if (!character64.test(this.deviceForm.ShadowPwd) && this.deviceForm.ShadowPwd !== '') {
        //   this.$message.error("认证ID不能超过64位字符");
        //   return false;
        // }
        // if (!character64.test(this.deviceForm.ShadowPath) && this.deviceForm.ShadowPath !== '') {
        //   this.$message.error("认证路径不能超过64位字符");
        //   return false;
        // }
        // // if ((!number.test(this.deviceForm.ShadowLocalPort) || this.deviceForm.ShadowLocalPort * 1 > 65535) && this.deviceForm.ShadowPath !== '') {
        // //   this.$message.error("本地端口只能填1~65535的数字");
        // //   return false;
        // // }
        // // if (!number.test(this.deviceForm.AlterId) && this.deviceForm.ShadowPath !== '') {
        // //   this.$message.error("交互ID只能填数字");
        // //   return false;
        // // }
        // this.deviceForm.ShadowLocalPort = this.deviceForm.ShadowLocalPort * 1
        // this.deviceForm.AlterId = this.deviceForm.AlterId * 1
        const data = {
          Data:{
            ...this.deviceForm
          }
        }
        const res = await connrequest('SetReportConfig', data)
        if(res.Status.StatusCode === 0) {
          this.$message.success('保存成功')
          this.getData()
        }
      },
      async setEmail(){
        const data = {
          Data:{
            ...this.deviceForm
          }
        }
        const res = await connrequest('TestSendEMail', data)
        if(res.Status.StatusCode === 0) {
          this.$message.success('测试邮件发送成功')
          this.getData()
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  /* @import url(); 引入css类 */
  // .parmeType {
  //   width: 850px;
  // }
  .parameType{
    margin: 10px 0;
    padding-bottom: 0;
  }
  .content {
    width: 1000px;
    position: relative;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    svg{
      font-size: 40px !important;
      margin-right: 20px;
    }
    ::v-deep .certification{
      .el-form-item{
        margin-bottom: 0;
      }
      .el-col{
        width: 800px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        p{
          display:block;
          color: #aaa;
          font-size: 12px;
          padding-left: 20px;
          white-space: nowrap;
        }
      }
    }
    .setUp{
      display: flex;
      align-items: center;
      width: 100%;
      // margin-bottom: 20px;
      flex-grow: 1;
      i{
        margin-right: 20px;
      }
      p{
        font-size: 14px;
        color: red;
      }
    }
    .btn{
      position: absolute;
      right: 50px;
      bottom: 20px;
    }
  }
  .top1{
    flex-wrap: nowrap;
    // margin-bottom: 20px;
  }
  ::v-deep.el-form-item{
    margin-bottom: 10px;
    label{
      font-weight: 500;
    }
  }
  </style>